import {
  FaCopy,
  FaShare,
  FaStar,
  FaTrash,
  FaCheckSquare,
  FaReply,
  FaBell,
  FaLanguage,
  FaSearch,
} from "react-icons/fa";

interface MessageActionCardProps {
  messageId: string;
  position: { top: number; left?: number; right?: number };
  onClose: () => void;
}

export default function MessageActionCard({
  messageId,
  position,
  onClose,
}: MessageActionCardProps) {
  const actions = [
    { icon: <FaCopy />, label: "复制" },
    { icon: <FaShare />, label: "转发" },
    { icon: <FaStar />, label: "收藏" },
    { icon: <FaTrash />, label: "删除" },
    { icon: <FaCheckSquare />, label: "多选" },
    { icon: <FaReply />, label: "引用" },
    { icon: <FaBell />, label: "提醒" },
    { icon: <FaLanguage />, label: "翻译" },
    { icon: <FaSearch />, label: "搜一搜" },
  ];

  const positionStyle = {
    top: `${position.top}px`,
    ...(position.left !== undefined ? { left: `${position.left}px` } : {}),
    ...(position.right !== undefined ? { right: `${position.right}px` } : {}),
  };

  return (
    <div
      className="message-action-card bg-white rounded-lg shadow-lg p-2 absolute z-50 w-48"
      style={positionStyle}
    >
      <div className="grid grid-cols-3 gap-2">
        {actions.map((action, index) => (
          <button
            key={index}
            className="flex flex-col items-center p-2 rounded-md hover:bg-gray-100"
          >
            <span className="text-blue-500 text-xl">{action.icon}</span>
            <span className="text-xs mt-1">{action.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}
